<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding: 0;
            list-style: none;
        }
        #box{
            width: 100%;
            height: 1000px;
            overflow: hidden;
            background-color: rgb(0, 163, 245);
        }
        #box>div{
            width: 1000px;
            height: 800px;
            margin: 0 auto;
            background-color: rgb(166, 215, 255);
            overflow: hidden;
        }
        #box>div>div{
            width: 500px;
            height: 100px;
            /* background-color: aquamarine; */
            margin: 20px auto 0;
        }
        #box>div>div>p:first-child{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 36px;
        }
        #box>div>div>p:last-child{
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 14px;
        }
        #lgo{
            width: 500px;
            height: 600px;
            background-color: #fff;
            border-radius: 10px;
            margin: 0 auto ;
            overflow: hidden;
            /* text-align: ; */
        }
        #lgp1{
            width: 450px;
            text-align: center;
            font-size: 26px;
            margin: 40px auto 30px;
        }
        #lgp2{
            width: 450px;
            text-align: center;
            font-size: 18px;
            margin: 0 auto 30px;
        }
        #lgpsp1{
            /* float: left; */
            margin-right: 40px;
        }
        #lgpsp2{
            /* float: right; */
            color: #8e8e8e;
            margin-left: 40px;
        }
        #denglu{
            display: block;
            width: 400px;
            height: 50px;
            margin: 0 auto 10px;
            outline: none;
            border: none;
            padding-left:10px ;
            box-sizing: border-box;
            background-color: #f7f7f7;
            border-radius: 10px;
        }
        #ma{  
            /* margin-left: 49px; */
            /* margin: 0 auto; */
            width: 288px;
            height: 50px;
            outline: none;
            border: none;
            background-color: #f7f7f7;
            border-radius: 10px;
            padding-left:10px ;
            box-sizing: border-box;
        }
        #lgd1{
            width: 100px;
            height: 50px;
            /* border: 1px solid black; */
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
            border-radius: 40px;
            background-color: #e5e5e5;
            text-align: center;
            line-height: 50px;
            color: #6a6a6a;
        }
        #lgdt{
            width: 400px;
            overflow: hidden;
            /* border: 1px solid black; */
            box-sizing: border-box;
            margin: 0 auto;
        }
        #lgdo{
            width: 400px;
            overflow: hidden;
            /* border: 1px solid black; */
            box-sizing: border-box;
            margin: 0 auto;
            margin-bottom: 10px;
            height: 50px;
        }
        #lgdt>div{
            float: left;
        }
        #lgdt>div:first-child{
            /* border: 1px solid black; */
            box-sizing: border-box;
        }
        button{
            display: block;
            width: 400px;
            height: 50px;
            margin: 20px auto ;
            border-radius: 50px;
            outline: none;
            border: none;
            background-color: #bff1d8;
        }
        #lgp3{
            width: 400px;
            margin: 10px auto 0;
            color: #8e8e8e;
            /* background-color: #6a6a6a; */
        }
        #lgp3>span{
            color: #25d37c;
            float: right;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <p>oppo</p>
                <p>登录账号可享更多的服务</p>
            </div>
            <form id="lgo">
                <p id="lgp1">账号登录</p>
                <p id="lgp2"><span id="lgpsp1">短信验证码登录</span>|<span id="lgpsp2">密码登录</span></p>
                <div id="lgdo"><input type="text" placeholder="请输入手机号" id="denglu"></div>
                <div id="lgdt"><div><input type="text" placeholder="请输入验证码" id="ma"></div><div id="lgd1">获取验证码</div></div>
                <button>登录</button>
                <p id="lgp3">隐私政策<span>注册账号</span></p>
            </form>
        </div>
    </div>
</body>
</html>